<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trippin' Out</title>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.16.custom.css"
	rel="stylesheet" />
<link type="text/css" href="timepicker.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>

<script src="https://www.google.com/jsapi?key=ABQIAAAA7FrY06w1-xBJ-3esBF23NhQ3pKOtPawqUjphZvV7ZZgp0eV0NhTIENK2rWR4sZe0_Aes2ecgMpB9aw"></script>
<script type="text/javascript"
	src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true">
//http://maps.googleapis.com/maps/api/js?key=AIzaSyDFvhnjCpPcp7eiC7KmIoWIUONntjutExk&sensor=true">
</script>

</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript" src="mainJS.js"></script>

<div id="deleteTripConfirmation" title="Delete Trip Permanently?">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>The trip <div id="deleteTripName"></div> will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>
<div id="add_attr_form" class="add_attr_form" title="Create an attraction">
<p class="validateTips">Required fields are marked with *. Please
notice that your input will be visible to all Trippin' Out users, so
make sure your info is correct.</p><br />
<form id="attrForm">
<label for="attrTitle">Attraction name:*</label> <input
	type="text" name="attrTitle" id="attrTitle"
	class="text ui-widget-content ui-corner-all" /><br/> Description:<br/><textarea
	name="attrDescription" id="attrDescription" cols="40" rows="5"></textarea><br/>
Type:* <select name="attrType" id="attrType">
	<option selected="selected"></option>
	<option>Hike</option>
	<option>Extreme Activity</option>
	<option>Amusement Park</option>
	<option>Sightseeing</option>
	<option>Cruise</option>
	<option>Tour</option>
	<option>Concert</option>
	<option>Fare</option>
	<option>Relaxation</option>
	<option>Pilgrimage/Religious</option>
	<option>Museum</option>
	<option>Other</option>
</select> 
<br/>
<br />
<table style="border:hidden">
	<tr style="border:hidden">
		<td width="171"><label>Attraction duration (HH:MM):*</label></td>
        <td> <input type="text" id="hourDuration" name="hourDuration" size="2px"/></td>
        <td><h2>:</h2></td>
        <td><input type="text" id="minDuration" name="minDuration" size="2px"/></td>
   </tr>
</table>
<br />
<br />
<label for="attrPrimaryPhone">Contact phone number:</label><br />
<input type="text" id="attrPrimaryPhone" class="text ui-widget-content ui-corner-all"/>
<br />
<label for="attrEmail">Contact email:</label><br />
<input type="text" id="attrEmail" class="text ui-widget-content ui-corner-all"/>
<br />
 <label for="attrAddress">Address:</label> 
 <input type="text" name="attrAddress" id="attrAddress" class="text ui-widget-content ui-corner-all" />
 <br/> 
 <label for="attrUrl">Website:</label> 
 <input type="text" name="attrUrl" id="attrUrl" class="text ui-widget-content ui-corner-all" />
 <br/>

</form>

</div>

<div id="add_stkn_form" class="add_stkn_form" title="Create a Sticky Note">
	<form id="stknForm">
		<label for="stknTitle">Sticky Note Title:  </label> 
		<input type="text" name="stknTitle" id="stknTitle" class="text ui-widget-content ui-corner-all" /><br/><br/> 
        <label for="stknDescription"> Description:</label><br/>
       <textarea name="stknDescription" id="stknDescription" cols="40" rows="10"></textarea><br/><br/>
        <label for="stknFrom">From: </label><input type="text" id="stknFrom" name="from" size="10"/>
        <label for="stknTo">To: </label><input type="text" id="stknTo" name="to" size="10"/>
	</form>
</div>

<div id="schedule_attr_form" title="Attend Attraction" >
	<form id="scheduleAttrForm">
			<label for="schedAttrDateTime">I'll be attending this attraction on: (You may leave this empty)</label><br />
			<input type="text" id="schedAttrDateTime"  class="text ui-widget-content ui-corner-all"/>
	</form>
</div>

<div id="edit_profile_form" title="Edit Your Trippin' Out Profile" align="left">
	<form id="editProfileForm">
	<table>
		<tr>
			<td><img id="userProfilePicture" alt="Profile Picture" align="left"/></td>
			<td><h2 id="userName"></h2></td>
		</tr>
	</table>
		
		<label for="userGender">Gender:<br/></label><input class="text ui-widget-content ui-corner-all" type="text" id="userGender" readonly="readonly"/><br />
		<label for="userBirthday">Birthday:<br/></label> <input class="text ui-widget-content ui-corner-all" type="text" id="userBirthday"/><br />
		<label for="userLanguages">Spoken Languages:<br/></label> <input class="text ui-widget-content ui-corner-all" type="text" id="userLanguages"/><br />
		About Me:<br /><textarea class="text ui-widget-content ui-corner-all" cols="40" rows="5" id="userInfo"></textarea><br />
        <div id="myStickyNotes"></div>                    
	</form>
</div>

<div id="sharedTripDialog" title="Shared Trip Description"></div>
<div id="attendees_list" title="Attending Attraction"></div>
<div id="attendee_profile" title="User's Profile"></div>
<div id="same_schedule_attractions" title="Same Schedule attractions">
</div>



<div id="shareTripDialog" title="Share Trip With Friends"></div>
<div id="errorAlert" title="Error">
	<table>
    	<tr>
    		<td><img src="images/error.png" height="50px" width="50px"/></td>
        	<td align="left"><h3 id="errorMessage" style="margin-left:5px !important"></h3></td>
      	</tr>
    </table>
</div>
<div id="userAlert" title="Attention">
	<table>
    	<tr>
    		<td><img src="images/icon_square.png" height="50px" width="50px"/></td>
        	<td align="left"><h3 id="userMessage" style="margin-left:5px !important"></h3></td>
      	</tr>
    </table>
</div>


<div id="attraction_details" title="Attraction Details">
	<div>
			<table align="center" cellspacing="10" class="attr_details">
				<tr>
					<td id="ad_attrImg" valign="middle" rowspan="3" class="ui-widget-content ui-corner-all">Loading...</td>
                    <td align="left" valign="middle" rowspan="3"><h2 id="ad_attrTitle"></h2></td>
                    <td align="center" valign="middle"><input type="button" id="ad_attrAddPlus" name="rateAdd" value="+"/></td>
                    <td align="left" valign="middle" style="margin-left: 20px"><input type="button" id="ad_attrAttend" name="attrAttend" value="Attend"/></td>
				</tr>
                <tr>
                	<td align="center" valign="middle" ><h2 id="ad_attrRating"></h2></td>
				</tr>
                <tr>
                	<td align="center" valign="middle"><input type="button" id="ad_attrAddMinus" name="rateSub" value="-"/></td>
                    <td align="left" valign="middle" style="margin-left: 20px"><input type="button" id="ad_attrAttendees" name="attrAttendees" value="Show Attendees"/></td>
                </tr>
                <tr align="left" style="margin-top: 20px">   
					<td valign="top" colspan="1"><p>Type</p></td>
					<td valign="top" colspan="3"><p id="ad_attrType"></p></td>
				</tr>
				<tr align="left">
					<td valign="top" colspan="1"><p>Description</p></td>
					<td valign="top" colspan="3"><p id="ad_attrDescription"></p></td>
				</tr>

                <tr align="left" style="margin-top: 20px">
					<td valign="top" colspan="1"><p>Duration</p></td>
					<td valign="top" colspan="3"><p id="ad_attrDuration"></p></td>
				</tr> 
                <tr align="left" style="margin-top: 20px">
					<td valign="top" colspan="1"><p>Address</p></td>
					<td valign="top" colspan="3"><p id="ad_attrAddress"></p></td>
				</tr>
                <tr align="left">
					<td valign="top" colspan="1"><p>Contact Phone Number</p></td>
					<td valign="top" colspan="3"><p id="ad_attrPrimaryPhoneNumber"></p></td>
				</tr>
                <tr align="left">
					<td valign="top" colspan="1"><p>Web Site</p></td>
                    <td colspan="3"><p id="ad_attrWebsite"></p></td>
				</tr>
                <tr align="left">
					<td valign="top" colspan="1"><p>Email</p></td>
                    <td valign="top" colspan="3"><p id="ad_attrEmail"></p></td>
				</tr>
				
			</table>
    </div>
   <hr/> 
	<div id="attraction_schedules_tab_header" style="overflow:auto; margin-top: 20px">
		<ul>
        	<li><a href="#past_schedule_attractions" id="past">Past Schedule</a></li>
			<li><a href="#future_schedule_attractions" id="future">Future Schedule</a></li>
		</ul>

		<div id="future_schedule_attractions" style="overflow: scroll">
        	<table id="future_schedule_attractions_table" align="center" cellpadding="10" width="100%"></table>			
        </div>
		<div id="past_schedule_attractions" style="overflow: scroll">
            <table id="past_schedule_attractions_table" align="center" cellpadding="10" width="100%"></table>			
        </div>
	</div>
</div>


<div id="bg">
<div id="wrap">
<div class="float-l left">

	<div id="logo">
		<h1>Trippin' Out</h1>
		<div>Plan <img src="images/dot.png" width="9" height="8" /> Meet<img src="images/dot.png" width="9" height="8" /> Travel</div>	
	</div>

	<div id="left_bar_tab_header">
		<ul>
         	<li><a href="#left_trip_plan_list" id="tab_trip">My Trips</a></li>
			<li><a href="#left_search_results" id="tab_search_results">Search Results</a></li>
			<li><a href="#left_notifications" id="tab_notifier">Notificatons</a></li>
		</ul>
		
		<div id="left_notifications" style="width:98%">
			<h3><a href="#">Shared Trips</a></h3>
			<div id ="tripNotifications"></div>
			
			<h3><a href="#">Attractions I May Like</a></h3>
			<div id ="attrNotifications"></div>
			
			<h3><a href="#">People Near Me</a></h3>
			<div id="peopleNotifications"></div>
		<!-- 
        	<table style="height:420px; width:100%">
            		<tr><td><h3>Shared Trips:</h3></td></tr>
                	<tr style="width:100%">
                    	<td valign="top">
                        <div id ="tripNotifications" class="tdScroll" style="overflow:auto"></div>

                        </td>
                    </tr>
                    <tr><td><h3>Attraction I May Like:</h3></td></tr>
                    <tr width="100%">
                    	<td valign="top">
                            <div id ="attrNotifications" class="tdScroll"style="overflow:auto">
                            	
                            </div>
                        </td>
                    </tr>
                    <tr style="height:10"><td><h3>People Near Me:</h3></td></tr>
                    <tr width="100%">
                    	<td valign="top">
                        	<div id ="peopleNotifications" class="tdScroll" style="overflow:auto">
                        		
                            </div>
                        </td>
                    </tr>
            </table>    -->            
        </div>

		<div id="left_trip_plan_list">
			<div id="accordion0"></div>
		</div>

		<div id="left_search_results">
			<div id="accordion1"></div>
		</div>
	</div>
    
</div>

<div class="float-r right"><br />
	<table width="100%">
		<tr>
			<td>
				<form id="attr_search" name="attr_search" action="#"><input
					type="text" name="address" id="address" size="27" maxlength="50" /> <input
					id="search_button" name="search_button" type="submit" value="Search" />
				</form>
			</td>
            <td>
           		<div id="radio">
                	<label for="attractionsView">Attractions</label><input type="radio" id="attractionsView" name="view" value="true" checked="checked"/>
                    <label for="stickyNotesView">Sticky Notes</label><input type="radio" id="stickyNotesView" name="view"  value="false"/>
				</div>
            </td>
			<td align="right">
				<a href="#" id="editProfileBtn">Edit your Trippin' Out profile</a>
			</td>
		</tr>
	</table>
	<div id="instructions_toggle">Click on the map to create an attraction.</div> 
<div id="map_canvas" style="width: 99%; height: 44%"></div>

<div id="main" style="width: 99%; height: 66%">

	<div id="stickyNoteSpace" style="display: none;" align="center"><img src="images/sticky-notes.jpg" alt="Sticky Notes" height="250px" /><img src="images/sticky-notes.jpg" alt="Sticky Notes" height="250px" /></div>
	<div id="showTrip" style="display:none; overflow:auto">
    	<table width="100%">
			<tr>
       		 	<td><h2 id="tripTitle">Trip title</h2></td>
				<td align="right" ><input type="button" id="newTrip" name="newTrip" value=" create New Trip "/></td>
                <td align="right" style="display:none;"><input type="button" id="testTrip" name="testTrip" value=" test Trip "/></td>	
        	</tr>
		</table>
             
		<form id="tripDetails" name="tripDetails" action="#">
			<table width="100%" height="30%">
				<tr>
					<td width="16%" height="15"><h4 id="tripFromDate" style="color:#30C">From: </h4></td>
					<td width="16%"><h4 id="tripToDate" style="color:#30C">To: </h4></td>
					<td width="68%" align="left" >
                    	<div style="float:right">
                        	<input type="button" id="shareTrip" value="Share Trip With Friends" style="right:3px"/>                              			
                    		<input type="button" id="ShowTripOnMap" value="Show Trip On Map" />
                        </div>
                    </td>				
				</tr>                                                 	
            </table>
         	<div id="scrollHelper" style="overflow-x:scroll">
		  <table height="170">
				
					<tr id="tripDaysList">                        
						<td width="170" height= "10%" align="center" ><h4 style="color:#039; background:#69C">Unscheduled Attractions</h4></td>  
					</tr>
					<tr id="attrListDays" >
						<td valign="top" ><div id ="unattended" class="tdScroll"></div></td>
					</tr>
				
 				</table> 
            </div>         
		</form>
        
	</div>

	<div id="create_update_trip" style="display:none;">
		<h2>Create your trip</h2>
            	<form id="newTripForm" name="newTripForm" action="#">
                	<table width="100%" height="46">
                    	<tr>
                            <td width="60%" height="28">
                                <h3>Create your own trip in a few simple steps! </h3>
                            </td>
                            <td width="40%">
                            	<p>Trip's Name: 
                            	  <input type="text" id="newTripName" name="newTripName" value="" size="15"/></p>
                            </td>
                        </tr>
                        <tr>
                        	<td height="10"></td>
                      </tr>  
                     </table>
                    <!-- <table width="551" style="display:none;">  
                        <tr>
                        	<td height="44">
                            <div class="demo">
                            	<p>
                                    <label for="amount">How long is your trip? </label>
                                    <input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
                                </p>
                                <div id="slider-range-min"></div>
                                </div>
                                <p style="font-size:9px">*Tip: If your uncertain of the number of days, just set it to the max. number you intend to travel.</p>
                            </td>
                            <td>
                            	
                            </td>
                        </tr>
                     </table> --> 
                     <table>
                  <tr>
                        	<td width="159">
                            	
                            </td>
                        </tr>
                        <tr>
                        	<td><br />
                            	<a href="#" id="chooseDatesButton" class="ui-state-default ui-corner-all">Add Specific Dates</a>
                    		</td>
                            <td width="420"><br />
                            	<div class="toggler">
									<div id="effect" class="ui-widget-content ui-corner-all">
                                      <label for="from">From</label>
                                        <input type="text" id="from" name="from" size="10"/>
                                      <label for="to">to</label>
                                        <input type="text" id="to" name="to" size="10"/>
                                	</div>
                                </div>
                            </td>
                        </tr>
                    </table> 
                    <table>
                    	<tr>
                        	<td>
                            
                            </td>
                            <td><br />
                            	<input id="newTripButton" name="newTripButton" type="submit" value="submit" />
                            </td>
                        </tr>
                    </table>                   
                </form>
</div>

</div>

<p style="background-color: #FFF"></p>
</div>
<div id="footer">
	<div class="float-l">
		<div id="ftlink">
        	<a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Submission</a> | <a href="#">Contact Us</a>
        </div>
		<p id="copyright">&copy; 2011. All Rights Reserved. <br />Designed by Team2, Thanks to 
        	<a href="http://www.free-css-templates.com/">Free CSS Templates</a>
        </p>
	</div>
</div>
<!-- /footer --></div>
</div>
</body>
</html>
